<script setup lang="ts">
// 生成key
import {getRandomKeyPair, privateToPublic} from "@/common/lib/keyring";
import {useI18n} from "vue-i18n";
import { i18n } from '@/common/plugin/lang';
import QRCodeVue from 'qrcode.vue';
import chain from '@/common/lib/chain';
import { eosChainId } from '@/common/util/network';

const publicKey = ref('')
const privateKey = ref('')
const SeedPhrase = ref('')
const isShow = ref(false)
const title = ref()
const keysText = ref('')
const encodedData = ref('')
// 切换语言
const currentLang = ref(i18n.global.locale);
const langOptions = [
  { label: '简体中文', value: 'zh-CN' },
  { label: 'English', value: 'en' },
];
const { locale, t } = useI18n();

//选择语言
const handleSwitchLang = (lang: any) => {
  locale.value = lang;
  useSettingStore().setLang(lang);
};

//生成账户名
const GenerateAccount = (m :number,n :number) =>{
  let res = 'upay'
  for(let i=0;i<8;i++){
    let a =Math.floor(Math.random()*n+m).toString()
    res = res + a
  }

  console.log(typeof res)
  return res
}
const account = GenerateAccount(1,5)


// 生成公钥 私钥 助记词 二维码
const handleGenerateKey = async () => {
  let keypair = await getRandomKeyPair();
  if (keypair) {
    publicKey.value = 'MOS' + keypair.publicKey.substring(3);
    privateKey.value = keypair.privateKey;
    SeedPhrase.value = keypair.mnemonic;
  }
  console.log(113,publicKey.value)
  // 使用 URLSearchParams 或其他方法编码数据
  const params = new URLSearchParams();
  params.append('publicKey', publicKey.value);
  params.append('account', account);
  encodedData.value = params.toString(); // 将编码后的参数转换为字符串
};
//生成二维码
onMounted(()=>{
  handleGenerateKey();
})


//打开弹窗
const showViews = (e: string) =>{
  isShow.value = true
  if (e == 'prt'){
    title.value = true
    keysText.value = privateKey.value
  }else if (e == 'mne'){
    title.value = false
    keysText.value = SeedPhrase.value
  }
}

//关闭弹窗
const close = () =>{
  isShow.value = false
}

</script>

<template>
      <div class="cover-content _effect register">
        <div class="nav-view-item">
          <div class=" flex  items-center mr-2">
            <img class="w-[16px] h-[16px]" src="@/assets/images/change_language@2x.png" />
            <n-popselect
                v-model:value="currentLang"
                :options="langOptions"
                trigger="click"
                @update:value="handleSwitchLang"
            >
              <div class="flex justify-center items-center cursor-pointer">
                <span class="mx-2 text-sm">{{ $t('public.language') }}</span>
                <icon-down-one class="mb-[2px]" theme="filled" size="14" fill="#333" />
              </div>
            </n-popselect>
          </div>
        </div>
        <img src="@/assets/images/ngklogo.png" alt="" class="logo_img">
        <div class="accountCard">
            <div class="accountCard_top">
              <div class="account">
                <span>{{ $t('setting.accountName') }}:</span>
                <span>{{account}}</span>
              </div>
              <div class="publicKey">
                <span>{{ $t('public.publicKeyTip') }}:</span>
                <span>{{publicKey}}</span>
              </div>
            </div>
            <div class="accountCard_bottom">
              <div class="accbot_top">{{ $t('public.purchase') }}</div>
              <div class="accbot_bottom">
                <button class="accbot_btn1" @click="showViews('prt')">{{ $t('public.viewPrivateKey') }}</button>
                <button class="accbot_btn2" @click="showViews('mne')">{{ $t('public.viewMnemonic') }}</button>
              </div>
            </div>
          </div>
        <div class="ewm_box">
          <q-r-code-vue :value="encodedData" :size="200"></q-r-code-vue>
        </div>
        <div style="width: 350px">
          <view-keys @close="close" :title="title" :isShow="isShow" :keysText="keysText"></view-keys>
        </div>
      </div>
</template>

<style lang="scss" scoped>
.register{
  display: flex;
  flex-direction: column;
  align-items: center;

  .nav-view-item{
    width:100%;
    display: flex;
    justify-content: right;
    margin: 10px 15px 5px 5px;
  }

  .accountCard{
    width: 90%;
    padding: 15px;
    margin-top: 10px;
    background-color: rgba(0,0,0,0);
    box-shadow: 0 0 2px #f9f9f9;
  }

  .account{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .account>span:first-child{
    display: inline-block;
    width: 50px;
  }

  .account>span:last-child{
    display: inline-block;
    word-wrap:break-word;
    word-break:normal;
    width: 240px;
  }

  .publicKey{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .publicKey>span:first-child{
    display: inline-block;
    width: 50px;
    height: 36px;
  }

  .publicKey>span:last-child{
    display: inline-block;
    word-wrap:break-word;
    word-break:normal;
    width: 240px;
  }

  .accountCard_bottom{
    border-top: 1px solid #9b9b9b;
    padding: 10px 5px;

    .accbot_top{
      color: #fcb040;
      text-align: center;
      font-size: 18px;
      width: 100%;
    }

    .accbot_bottom{
      width: 100%;
      display: flex;
      margin-top: 10px;
      justify-content: space-around;

      .accbot_btn1{
        background-color: #409eff;
        color: #fff;
        border-radius: 0 10px 0 10px ;
        padding: 8px 15px;
      }

      .accbot_btn2{
        background-color: #409eff;
        color: #fff;
        border-radius: 10px 0 10px 0;
        padding: 8px 15px;
      }
    }
  }

  .ewm_box{
    margin-top: 20px;
  }

  //.account_submit{
  //  margin-top: 30px;
  //
  //  .accsub_btn{
  //    background: $color-primary;
  //    box-shadow: 0px 2px 6px 0px rgba(210, 0, 244, 0.09);
  //    border-radius: 50px;
  //    width: 178px;
  //    height: 44px;
  //    margin: auto;
  //    display: flex;
  //    align-items: center;
  //    justify-content: center;
  //    font-size: 14px;
  //    font-family: PingFangSC-Medium, PingFang SC;
  //    font-weight: 500;
  //    color: #ffffff;
  //    line-height: 20px;
  //    text-shadow: 0px 2px 6px rgba(210, 0, 244, 0.09);
  //    margin-top: 38px;
  //    &:active {
  //      border-color: $color-primary;
  //    }
  //  }
  //}

}

</style>
